<template>
  <div class="gallery">
    <div class="gallery-header">
      <h1>动漫图片展示</h1>
      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索动漫..."
          class="search-input"
          :prefix-icon="Search"
        />
        <el-select v-model="selectedCategory" placeholder="选择分类" class="category-select">
          <el-option
            v-for="category in categories"
            :key="category.value"
            :label="category.label"
            :value="category.value"
          />
        </el-select>
      </div>
    </div>

    <div class="gallery-grid">
      <div class="grid-content-wrapper">
        <el-row :gutter="20">
          <el-col
            v-for="(image, index) in filteredImages"
            :key="index"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
          >
            <el-card
              class="image-card"
              :body-style="{ padding: '0px' }"
              shadow="hover"
              @click="handleImageClick(image)"
            >
              <el-image
                :src="'/' + image"
                fit="cover"
                class="gallery-image"
                loading="lazy"
              >
                <template #placeholder>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div class="image-info">
                <h3>{{ getImageTitle(image) }}</h3>
                <div class="image-actions">
                  <el-button type="primary" text @click.stop="downloadImage(image)">
                    <el-icon><Download /></el-icon>
                    下载
                  </el-button>
                  <el-button type="primary" text @click.stop="shareImage(image)">
                    <el-icon><Share /></el-icon>
                    分享
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      :title="getImageTitle(selectedImage)"
      width="80%"
      class="preview-dialog"
    >
      <el-image
        :src="selectedImage ? '/' + selectedImage : ''"
        fit="contain"
        style="width: 100%; height: 70vh"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewVisible = false">关闭</el-button>
          <el-button type="primary" @click="downloadImage(selectedImage)">
            下载图片
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分享对话框 -->
    <el-dialog
      v-model="shareVisible"
      title="分享图片"
      width="30%"
      center
    >
      <div class="share-content">
        <el-image
          :src="selectedImage ? '/' + selectedImage : ''"
          fit="cover"
          style="width: 100%; max-height: 200px; margin-bottom: 20px"
        />
        <el-input
          v-model="shareUrl"
          readonly
          class="share-url"
        >
          <template #append>
            <el-button @click="copyShareUrl">复制</el-button>
          </template>
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, Picture, Download, Share } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 图片列表
const images = [
  'chihiro005.jpg',
  'kokurikozaka049.jpg',
  'ponyo012.jpg',
  'ponyo006.jpg',
  'chihiro043.jpg',
  'marnie006.jpg',
  'marnie036.jpg',
  'marnie017.jpg',
  'marnie014.jpg',
  'kazetachinu007.jpg',
  'karigurashi018.jpg',
  'karigurashi012.jpg',
  'karigurashi025.jpg',
  'karigurashi024.jpg',
  'karigurashi050.jpg',
  'karigurashi048.jpg',
  'ponyo034.jpg',
  'ponyo008.jpg',
  'kazetachinu037.jpg',
  'kazetachinu047.jpg',
  'kazetachinu027.jpg',
  'kazetachinu003.jpg',
  'howl043.jpg',
  'howl048.jpg',
  'howl046.jpg',
  'howl014.jpg',
  'chihiro050.jpg',
  'chihiro023.jpg',
  'chihiro022.jpg',
  'chihiro019.jpg',
  'mononoke049.jpg',
  'mononoke032.jpg',
  'mononoke030.jpg',
  'mononoke009.jpg',
  'porco027.jpg',
  'majo012.jpg',
  'majo033.jpg',
  'majo018.jpg',
  'majo013.jpg',
  'majo006.jpg',
  'majo001.jpg',
  'laputa009.jpg',
  'laputa006.jpg',
  'laputa029.jpg',
  'totoro015.jpg',
  'totoro028.jpg',
  'totoro026.jpg',
  'totoro021.jpg',
  'totoro008.jpg',
  'totoro004.jpg',
  'totoro007.jpg'
]

const searchQuery = ref('')
const selectedCategory = ref('')
const previewVisible = ref(false)
const shareVisible = ref(false)
const selectedImage = ref('')
const shareUrl = ref('')

const categories = [
  { label: '全部', value: '' },
  { label: '千与千寻', value: 'chihiro' },
  { label: '哈尔的移动城堡', value: 'howl' },
  { label: '龙猫', value: 'totoro' },
  { label: '幽灵公主', value: 'mononoke' },
  { label: '魔女宅急便', value: 'majo' },
  { label: '天空之城', value: 'laputa' },
  { label: '红猪', value: 'porco' },
  { label: '悬崖上的金鱼姬', value: 'ponyo' },
  { label: '借东西的小人阿莉埃蒂', value: 'karigurashi' },
  { label: '起风了', value: 'kazetachinu' },
  { label: '回忆中的玛妮', value: 'marnie' },
  { label: '来自虞美人之坡', value: 'kokurikozaka' }
]

// 根据文件名获取动漫标题
const getImageTitle = (filename: string) => {
  const titles: { [key: string]: string } = {
    chihiro: '千与千寻',
    kokurikozaka: '来自虞美人之坡',
    ponyo: '悬崖上的金鱼姬',
    marnie: '回忆中的玛妮',
    kazetachinu: '起风了',
    karigurashi: '借东西的小人阿莉埃蒂',
    howl: '哈尔的移动城堡',
    mononoke: '幽灵公主',
    porco: '红猪',
    majo: '魔女宅急便',
    laputa: '天空之城',
    totoro: '龙猫'
  }

  const prefix = filename.split(/\d/)[0]
  return titles[prefix] || prefix
}

// 过滤图片
const filteredImages = computed(() => {
  let result = images

  if (selectedCategory.value) {
    result = result.filter(image => image.startsWith(selectedCategory.value))
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(image => {
      const title = getImageTitle(image)
      return title.toLowerCase().includes(query)
    })
  }

  return result
})

// 处理图片点击
const handleImageClick = (image: string) => {
  selectedImage.value = image
  previewVisible.value = true
}

// 下载图片
const downloadImage = (image: string) => {
  const link = document.createElement('a')
  link.href = '/' + image
  link.download = image
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  ElMessage.success('下载成功')
}

// 分享图片
const shareImage = (image: string) => {
  selectedImage.value = image
  shareUrl.value = window.location.origin + '/' + image
  shareVisible.value = true
}

// 复制分享链接
const copyShareUrl = () => {
  navigator.clipboard.writeText(shareUrl.value)
  ElMessage.success('链接已复制到剪贴板')
}
</script>

<style scoped>
.gallery {
  padding: 100px 80px 40px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.gallery-header {
  max-width: 1200px;
  margin: 0 auto 40px;
  text-align: center;
}

.gallery-header h1 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 30px;
}

.search-bar {
  display: flex;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
}

.category-select {
  width: 200px;
}

.gallery-grid {
  max-width: 1200px;
  margin-left: 100px;
  margin-right: auto;
}

.grid-content-wrapper {
  padding-left: 40px;
}

.image-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.image-card:hover {
  transform: translateY(-5px);
}

.gallery-image {
  width: 100%;
  height: 200px;
}

.image-info {
  padding: 15px;
}

.image-info h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #303133;
}

.image-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f5f7fa;
  color: #909399;
}

.preview-dialog :deep(.el-dialog__body) {
  padding: 0;
  background-color: #000;
}

.preview-dialog :deep(.el-dialog__header) {
  background-color: #fff;
  margin: 0;
  padding: 15px 20px;
}

.share-content {
  text-align: center;
}

.share-url {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .gallery {
    padding: 80px 10px 20px;
  }

  .gallery-header h1 {
    font-size: 28px;
  }

  .search-bar {
    flex-direction: column;
  }

  .category-select {
    width: 100%;
  }

  .gallery-image {
    height: 150px;
  }
}
</style> 